<template>
    <div>
        <el-card class="!border-none mb-4" shadow="never">
            <el-form class="mb-[-16px]" :model="queryParams" inline>
                <el-form-item label="广告账号ID" prop="account_id">
                    <el-input class="w-[280px]" v-model="queryParams.account_id" clearable placeholder="请输入广告账号id" />
                </el-form-item>
                <el-form-item label="角色" prop="account_role_type">
                    <el-input class="w-[280px]" v-model="queryParams.account_role_type" clearable placeholder="请输入角色" />
                </el-form-item>
                <el-form-item label="名称" prop="account_name">
                    <el-input class="w-[280px]" v-model="queryParams.account_name" clearable placeholder="请输入名称" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none" v-loading="pager.loading" shadow="never">

            <el-button v-perms="['ads.tencent_advertising_account/add']" type="primary" @click="handleAdd">
                <template #icon>
                    <icon name="el-icon-Plus" />
                </template>
                新增授权
            </el-button>

            <el-button v-perms="['ads.tencent_advertising_account/delete']" :disabled="!selectData.length"
                @click="handleDelete(selectData)">
                删除
            </el-button>
            <div class="mt-4">
                <el-table :data="pager.lists" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <!-- <el-table-column label="租户ID" prop="tenant_id" show-overflow-tooltip /> -->
                    <!-- <el-table-column label="账号access_token" prop="access_token" show-overflow-tooltip /> -->
                    <!-- <el-table-column label="账号refresh_token" prop="refresh_token" show-overflow-tooltip /> -->
                    <!-- <el-table-column label="" prop="access_token_expires_in" show-overflow-tooltip /> -->
                    <!-- <el-table-column label="" prop="refresh_token_expires_in" show-overflow-tooltip /> -->
                    <el-table-column label="账号ID" prop="account_id" show-overflow-tooltip />
                    <el-table-column label="角色" prop="account_role_type" show-overflow-tooltip />
                    <el-table-column label="名称" prop="account_name" show-overflow-tooltip />
                    <!-- <el-table-column label="LOGIN_NAME" prop="login_name" show-overflow-tooltip /> -->

                    <el-table-column label="操作" width="250" fixed="right">
                        <template #default="{ row }">
                            <el-button v-perms="['ads.tencent_advertising_account/wechat_list']" type="primary" link
                                @click="handleWechatList(row.account_id)">
                                已绑定账号
                            </el-button>
                            <el-button v-perms="['ads.tencent_advertising_account/bind_wechat']" type="primary" link
                                @click="handleBindWechat(row.account_id)">
                                新增绑定
                            </el-button>
                            <el-button v-perms="['ads.tencent_advertising_account/delete']" type="danger" link
                                @click="handleDelete(row.id)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex mt-4 justify-end">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />

        <wechat-list-popup v-if="showWechatList" ref="wechatListRef" :account_id="wechatListAccountId" 
        @success="showWechatList = false"  @close="showWechatList = false" />
        <bind-wechat-popup v-if="showBindWechat" ref="bindWechatRef" :account_id="bindWechatAccountId"
            @success="showBindWechat = false" @close="showBindWechat = false" />

    </div>
</template>

<script lang="ts" setup name="tencentAdvertisingAccountLists">
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { apiTencentAdvertisingAccountLists, apiTencentAdvertisingGetAccountAuthUrl, apiTencentAdvertisingAccountDelete } from '@/api/tencent_advertising_account'
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
import WechatListPopup from '@/views/ads/tencent_advertising_account/wechat_list.vue'
// 导入绑定微信账号弹窗组件
import BindWechatPopup from '@/views/ads/tencent_advertising_account/bind_wechat.vue'

// 是否显示编辑框
const showEdit = ref(false)

const wechatListRef = shallowRef<InstanceType<typeof WechatListPopup>>()
const bindWechatRef = shallowRef<InstanceType<typeof BindWechatPopup>>()

const showWechatList = ref(false)
const showBindWechat = ref(false)

const wechatListAccountId = ref()
const bindWechatAccountId = ref()

// 查询条件
const queryParams = reactive({
    account_id: '',
    account_role_type: '',
    account_name: '',
    login_name: '',
})

// 选中数据
const selectData = ref<any[]>([])

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
    selectData.value = val.map(({ id }) => id)
}

// 获取字典数据
const { dictData } = useDictData('')

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiTencentAdvertisingAccountLists,
    params: queryParams
})

// 添加
const handleAdd = async () => {
    let href = await apiTencentAdvertisingGetAccountAuthUrl()
    window.open(href?.url, '_blank');
}

// 删除
const handleDelete = async (id: number | any[]) => {
    await feedback.confirm('确定要删除？')
    await apiTencentAdvertisingAccountDelete({ id })
    getLists()
}

//绑定账号记录
const handleWechatList = async (id: number) => {
    wechatListAccountId.value = id
    showWechatList.value = true
    await nextTick()
    wechatListRef.value?.open('wechat_list')
}

//新增绑定（重命名方法）
const handleBindWechat = async (id: number) => {  // 修改方法名
    bindWechatAccountId.value = id  // 修复变量赋值
    showBindWechat.value = true
    await nextTick()
    bindWechatRef.value?.open('bind_wechat')
}

getLists()
</script>
